<template>
	<div class="photoinfo-container">
		<h3>{{photoinfo.title}}</h3>
		<p class="subtitle">
			<span>发表时间：{{photoinfo.add_time | dataFormat}}</span>
			<span>点击：{{photoinfo.click}}次</span>
		</p>
		<hr>

		<!-- 一个缩略图 -->
		<div class="thumbs">
			<vue-preview :slides="list" @close="handleClose" class="ass"></vue-preview>
		</div>

		<!-- 图片内容区 -->
		<div class="content" v-html="photoinfo.content"></div>

		<!-- 评论子组件 -->
		<cmt-box :id="this.id"></cmt-box>
	</div>
</template>

<script>
	// 1.导入评论子组件
	import comment from '../subcomponents/comment.vue'

	export default {
		data() {
			return {
				id: this.$route.params.id, //从路由中获取到的图片id
				photoinfo: [], //图片详情
				list: [] //缩略图的数组
			};
		},
		created() {
			this.getPhotoInfo()
			this.getThumbs()
		},
		methods: {
			getPhotoInfo() {
				// 获取图片详情
				this.$http.get('http://www.liulongbin.top:3005/api/getimageInfo/' + this.id).then(result => {
					if (result.body.status === 0) {
						this.photoinfo = result.body.message[0]
						console.log(this.photoinfo)
					} else {
						Toast("false")
					}
				})
			},
			handleClose() {
				console.log('close event')
			},
			getThumbs() {
				// 获取缩略图
				this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.id).then(result => {
					if (result.body.status === 0) {
						// 循环每个图片，补全图片的宽和高
						result.body.message.forEach(item => {
							item.w = 600
							item.h = 400
							item.msrc = item.src
						});
						// 把完整的数据保存到list中
						this.list = result.body.message;
					}
				})
			}
		},
		components: { //注册评论子组件
			'cmt-box': comment
		}
	}
</script>

<style lang="less" scoped>
	.photoinfo-container {
		padding: 3px;

		h3 {
			color: #26A2FF;
			font-size: 15px;
			text-align: center;
			margin: 15px 0;
		}

		.subtitle {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
		}

		.content {
			font-size: 13px;
			line-height: 30px;
		}
		
		.thumbs{
			vue-preview{
				margin: 10px;
				box-shadow: 0 0 8px #999;
			}
		}
	}
</style>
